<template>
  <div class="colorBox" :style="{
    backgroundColor: data.hex,
  }">
    <div>
      <h1 :style="{
        color: getFontColor(data.hex)
      }">颜色代码转换器</h1>
      <div class="colorSet">
        <p>在HEX、RGB、CMYK、HSL和HSV格式之间转换颜色代码。颜色转换。</p>
        <div class="color-main">
          <ColorPicker v-model="data.hex" @change="getHEX" />
          <el-form class="color-form" label-position="top" label-width="auto">
            <el-form-item label="HEX">
              <el-input v-model="data.hex" class="w300" @change="getHEX"></el-input>
              <el-color-picker v-model="data.hex" @change="getHEX" :predefine="[
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
              ]" />
            </el-form-item>
            <el-form-item label="CMYK">
              <template v-for="(item, index) in data.cmyk">
                <el-input-number v-model="data.cmyk[index]" class="w100" :precision="0" :min="0" :max="100" :step="1"
                  :controls="false" @change="getCmyk"></el-input-number>
              </template>
            </el-form-item>
            <el-form-item label="RGB">
              <template v-for="(item, index) in data.rgb">
                <el-input-number v-model="data.rgb[index]" class="w100" :precision="0" :min="0" :max="255" :step="1"
                  :controls="false" @change="getRgb"></el-input-number>
              </template>
            </el-form-item>
            <el-form-item label="HSV">
              <template v-for="(item, index) in data.hsv">
                <el-input-number v-model="data.hsv[index]" class="w100" :precision="0" :min="0"
                  :max="index === 0 ? 360 : 100" :step="1" :controls="false" @change="getHsv"></el-input-number>
              </template>
            </el-form-item>
            <el-form-item label="HSL">
              <template v-for="(item, index) in data.hsl">
                <el-input-number v-model="data.hsl[index]" class="w100" :precision="0" :min="0"
                  :max="index === 0 ? 360 : 100" :step="1" :controls="false" @change="getHsl"></el-input-number>
              </template>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import ColorPicker from './ColorPicker.vue';
import './pageCss.scss'; // 引入样式
import { hexToRgb, hexToCmyk, hexToHsv, hexToHsl, cmykToHex, rgbToHex, rgbToHsl, rgbToHsv, rgbToCmyk, hsvToRgb, hslToRgb, getFontColor } from '@/utils/color';
import { useListComponent } from './pageTs'; // 引入逻辑
const { dataInfo } = useListComponent();
import { reactive, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance() as any;
const data: any = reactive({
  hex: '#FF0000',
  cmyk: [0, 0, 0, 0],
  rgb: [255, 255, 255],
  hsv: [0, 0, 100],
  hsl: [0, 0, 100],
});
//更改Hex
const getHEX = () => {
  const hex = data.hex
  data.rgb = Object.values(hexToRgb(hex))
  data.cmyk = Object.values(hexToCmyk(hex))
  data.hsv = Object.values(hexToHsv(hex))
  data.hsl = Object.values(hexToHsl(hex))
};
//更改CMYk
const getCmyk = () => {
  const cmyk: any = {
    c: data.cmyk[0],
    m: data.cmyk[1],
    y: data.cmyk[2],
    k: data.cmyk[3],
  }
  const hex = cmykToHex(cmyk)
  data.hex = hex
  data.rgb = Object.values(hexToRgb(hex))
  data.hsv = Object.values(hexToHsv(hex))
  data.hsl = Object.values(hexToHsl(hex))
};
//更改Rgb
const getRgb = () => {
  const rgb: any = {
    r: data.rgb[0],
    g: data.rgb[1],
    b: data.rgb[2],
  }
  const hex = rgbToHex(rgb)
  data.hex = hex
  data.cmyk = Object.values(rgbToCmyk(rgb))
  data.hsv = Object.values(rgbToHsv(rgb))
  data.hsl = Object.values(rgbToHsl(rgb))
};
//更改Hsv
const getHsv = () => {
  const hsv: any = {
    h: data.hsv[0],
    s: data.hsv[1],
    v: data.hsv[2],
  }
  const rgb = hsvToRgb(hsv)
  data.rgb = rgb
  data.hex = rgbToHex(rgb)
  data.cmyk = Object.values(rgbToCmyk(rgb))
  data.hsl = Object.values(rgbToHsl(rgb))
};
//更改Hsl
const getHsl = () => {
  const hsl: any = {
    h: data.hsl[0],
    s: data.hsl[1],
    l: data.hsl[2],
  }
  const rgb = hslToRgb(hsl)
  data.rgb = rgb
  data.hex = rgbToHex(rgb)
  data.cmyk = Object.values(rgbToCmyk(rgb))
  data.hsv = Object.values(rgbToHsv(rgb))
};

onMounted(() => {
  getHEX()
});

onBeforeUnmount(() => { });
</script>